<template>
  <el-card shadow="always"
           :class="{'card-cursor': [0,1].includes(index)}"
           class="card-box"
           @click.native="handleClick()">
    <div class="card-item-top">{{name}}</div>
    <div class="card-item-flex">
      <div>
        <slot />
      </div>
      <div class="right-img">
        <img :src="src" />
      </div>
    </div>
  </el-card>
</template>

<script>

export default {
  name: 'CardItem',
  props: {
    name: {
      type: String,
      default: "电子印章"
    },
    full: {
      type: Function,
      default: () => { }
    },
    src: {
      type: String,
      default: require('@/static/images/seal.png')
    },
    index: {
      type: Number,
      default: 0
    },
    fulfill: {
      type: Function,
      default: () => { }
    }
  },
  computed: {
  },
  methods: {
    handleClick () {
      if (typeof this.fulfill === "function") {
        this.fulfill();
      }
    }
  }
}
</script>

<style scoped>
.card-box {
  position: relative;
  /* margin-bottom: 20px; */
}
.card-item-top {
  width: 170px;
  height: 40px;
  background: rgba(235, 102, 43, 1);
  opacity: 1;
  border-radius: 10px 0px 26px 0px;
  position: absolute;
  top: 0;
  left: -3px;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
  color: #ffffff;
}
.card-item-flex {
  display: flex;
  justify-content: space-between;
}

.midele-btn {
  position: absolute;
  bottom: 20px;
}
.right-img {
  width: 100%;
  max-width: 138px;
  height: auto;
}
.right-img img {
  width: 100%;
  height: 155px;
}

.period {
  position: absolute;
  top: 50%;
}
.parent {
  width: 100%;
}
.btn-count {
  position: absolute;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-cursor {
  cursor: pointer;
}
</style>